<template>
    <div class="divBox">
        <el-card class="box-card">

            <div class="flex_start">
                <div class="dataSelect">
                    数据场：
                    <UserSearchable v-model="dataFactoryId" :type="'datafieldList'">
                        <template #dropdownTitle>
                            <span>数据场</span>
                        </template>
                        <template v-slot:dropdown="{ item }">
                            <span>{{ item.name }}</span>
                        </template>
                    </UserSearchable>
                </div>
                <div>
                    品种：
                    <el-select v-model="exchangeCommodityId" placeholder="请选择品种名称" class="selWidth" clearable>
                        <el-option v-for="item in options" :key="item.id" :label="item.commodityName" :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div class="btn_search">
                    <el-button type="primary" icon="el-icon-search" @click="searchBtn">搜索</el-button>
                    <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
                </div>
            </div>

            <div class="sectionPie">
                <div class="echartBox" id="echartBox1">
                </div>
                <div class="echartBox" id="echartBox2">
                </div>
                <div class="echartBox" id="echartBox3">
                </div>
                <div class="echartBox" id="echartBox4">
                </div>
                <div class="echartBox" id="echartBox5">
                </div>
            </div>


        </el-card>
    </div>
</template>

<script>
import echarts from 'echarts';

import UserSearchable from "@/components/UserSearchable";


import { getDictData, exchangecommodityGetOption } from "@/api/transaction";
import {
    RealTimeMonitoringPie
} from '@/api/realTimeMonitor'
export default {
    name: 'realTimeMonitor',
    components: { UserSearchable },
    data() {
        return {
            options: [],
            from: {
                symbols: [],
                page: 1,
                limit: 15,
            },
            checked: true,
            loading: false,
            info: {},
            tableData: {
                accountResponses: [],
                contractResponses: [],
                total: 0
            },
            userId: '',
            list: [],
            listtotal: 0,
            listpage: 1,
            listlimit: 10,
            visible: false,
            timerId: null,

            // 饼图数据
            pieData: [],

            dataFactoryId: "",
            exchangeCommodityId: ""
        }
    },
    mounted() {
        this.getData()
        // this.getEchart()
        this.getDict()
    },

    methods: {
        getData() {
            let data = {}
            let that = this;

            RealTimeMonitoringPie(data).then(res => {
                // console.log('饼图数', res)
                // console.log(res)
                that.pieData = res
                console.log('饼图数据', that.pieData)
                // console.log(that.pieData)
                // console.log('第一个饼图', that.pieData.positionLongShortRatio)

                that.getEchart();

            }).catch(err => {
                console.log(err)
            })
        },
        getEchart() {
            let that = this;

            let eChartPie1 = echarts.init(document.getElementById('echartBox1'));
            let eChartPie2 = echarts.init(document.getElementById('echartBox2'));
            let eChartPie3 = echarts.init(document.getElementById('echartBox3'));
            let eChartPie4 = echarts.init(document.getElementById('echartBox4'));
            let eChartPie5 = echarts.init(document.getElementById('echartBox5'));

            let option = {
                title: {
                    text: '仓库交易量占比',
                    // subtext: 'Fake Data',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            { value: 735, name: 'Direct' },
                            { value: 580, name: 'Email' },
                        ],

                    }
                ]
            };


            // let data1=that.pieData.positionLongShortRatio
            // console.log('aaa',data1)

            let option1 = {
                color: ['#FF776D', "#6FDFAE"],
                title: {
                    // text: 'positionLongShortRatio',
                    // subtext: 'Fake Data',
                    text: '交易员持仓多空比',
                    left: 'center',
                    top: '5%'
                },

                tooltip: {
                    trigger: 'item',
                    formatter: "{c}<br/>({d}%)"
                },
                legend: {
                    orient: 'horizontal',
                    bottom: '0',
                },
                series: [
                    {
                        // name: 'Access From',
                        type: 'pie',
                        radius: '75%',
                        data: that.pieData.positionLongShortRatio,
                        // data: [
                        //     { name: '叫名字', value: 0 },
                        //     { name: '民资', value: 0 },
                        // ],

                        label: {
                            show: true,
                            position: 'inside',
                            // formatter: '{b}:{d}%' 
                            formatter: '{c}\n({d}%)'
                        },


                    }
                ],

            };
            let option2 = {
                color: ['#FF776D', "#6FDFAE"],
                title: {
                    text: '交易员持仓盈亏比',
                    // subtext: 'Fake Data',
                    left: 'center',
                    top: '5%'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{c}<br/>({d}%)"
                },
                legend: {
                    orient: 'horizontal',
                    bottom: '0'
                },
                series: [
                    {
                        // name: 'Access From',
                        type: 'pie',
                        radius: '75%',
                        data: that.pieData.positionProfitLossRatio,
                        label: {
                            show: true,
                            position: 'inside',
                            formatter: '{c}\n({d}%)'
                        },
                    }
                ]
            };
            let option3 = {
                color: ['#FF776D', "#6FDFAE"],
                title: {
                    text: '持仓手数量多空比',
                    // subtext: 'Fake Data',
                    left: 'center',
                    top: '5%'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{c}<br/>({d}%)"
                },
                legend: {
                    orient: 'horizontal',
                    bottom: '0'
                },
                series: [
                    {
                        // name: 'Access From',
                        type: 'pie',
                        radius: '75%',
                        data: that.pieData.positionVolumeShortLongRatio,
                        label: {
                            show: true,
                            position: 'inside',
                            formatter: '{c}\n({d}%)'
                        },
                    }
                ]
            };
            let option4 = {
                color: ['#FF776D', "#6FDFAE"],
                title: {
                    text: '交易员平仓多空比',
                    // subtext: 'Fake Data',
                    left: 'center',
                    top: '5%'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{c}<br/>({d}%)"
                },
                legend: {
                    orient: 'horizontal',
                    bottom: '0'
                },
                series: [
                    {
                        // name: 'Access From',
                        type: 'pie',
                        radius: '75%',
                        data: that.pieData.tradeLongShortRatio,
                        label: {
                            show: true,
                            position: 'inside',
                            formatter: '{c}\n({d}%)'
                        },
                    }
                ]
            };
            let option5 = {
                color: ['#FF776D', "#6FDFAE"],
                title: {
                    text: '交易员平仓盈亏比',
                    // subtext: 'Fake Data',
                    left: 'center',
                    top: '5%'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{c}<br/>({d}%)"
                },
                legend: {
                    orient: 'horizontal',
                    bottom: '0'
                },
                series: [
                    {
                        // name: 'Access From',
                        type: 'pie',
                        radius: '75%',
                        data: that.pieData.tradeProfitLossRatio,
                        label: {
                            show: true,
                            position: 'inside',
                            formatter: '{c}\n({d}%)'
                        },
                    }
                ]
            };
            eChartPie1.setOption(option1)
            eChartPie2.setOption(option2)
            eChartPie3.setOption(option3)
            eChartPie4.setOption(option4)
            eChartPie5.setOption(option5)


        },

        // 字典数据
        getDict() {
            exchangecommodityGetOption()
                .then((res) => {
                    console.log("品种全列表", res);
                    this.options = res;

                })
                .catch((err) => {
                    console.log(err);
                });
        },

        searchBtn() {
            let that = this;
            // console.log('数据：', that.dataFactoryId, that.exchangeCommodityId)
            let data = {
                dataFactoryId: that.dataFactoryId,
                commodityId: that.exchangeCommodityId
            }

            RealTimeMonitoringPie(data).then(res => {
                // console.log('饼图数', res)
                this.pieData = res
                this.getEchart();
            }).catch(err => {
                console.log(err)
            })
        },
        reset() {
            let that = this;
            that.dataFactoryId = ""
            that.exchangeCommodityId = ""
            that.getData()
        }


    },

    watch: {
        // dataFactoryId(newValue, oldValue) {
        //     console.log('监听：', newValue)
        //     let data = {}
        //     data.dataFactoryId = newValue;
        //     RealTimeMonitoringPie(data).then(res => {
        //         // console.log('饼图数', res)
        //         this.pieData = res
        //         console.log('饼图数据', this.pieData)
        //         this.getEchart();
        //     }).catch(err => {
        //         console.log(err)
        //     })
        // }
    }
}
</script>

<style scoped lang="scss">
.sectionPie {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.echartBox {
    width: 19.5%;
    height: 350px;
    border: 1px solid #000;
    border-radius: 20px;
}

.dataSelect {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    margin-right: 20px;
}

.flex_start {
    font-size: 16px;
    display: flex;
}

.btn_search {
    font-size: 16px;
    margin-left: 20px;
}
</style>